<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#divbox{
				height:500px;
				width:500px;
				background-color: pink;
			}
			#pbox{
				height:300px;
				width:300px;
				background-color: slateblue;
			}
			#spanbox{
				display: block;
				height:100px;
				width:100px;
				background-color: crimson;
			}
		</style>
	</head>
	<body>
		<div id="divbox">
			<p id="pbox">
				<span id="spanbox"></span>
			</p>
		</div>
		
		<script>
			//事件周期
			// 1. 捕获阶段---IE没有捕获  沿着DOM树向下(由外向里)
			// 2. 目标触发  运行事件监听函数
			// 3. 冒泡阶段  沿着DOM树向上传播（由里向外）
			
			//DOM0---》冒泡阶段
			// divbox.onclick=function(){
			// 	alert("divBox");
			// }
			// pbox.onclick=function(){
			// 	alert("pBox");
			// }
			// spanbox.onclick=function(){
			// 	alert("spanBox");
			// }
			
			//DOM2--默认 冒泡阶段
			//true---》捕获方向
			// divbox.addEventListener("click",function(){
			// 	alert("divBox");
			// },true)
			// pbox.addEventListener("click",function(){
			// 	alert("pBox");
			// },true)
			// spanbox.addEventListener("click",function(){
			// 	alert("spanBox");
			// },true)
			
			//取消冒泡
			divbox.onclick=function(){
				alert("divBox");
			}
			pbox.onclick=function(e){
				alert("pBox");
			}
			spanbox.onclick=function(e){
				// e.stopPropagation();//FF 取消冒泡
				// e.cancelBubble=true;//IE  取消冒泡
				if(e&&e.stopPropagation){
					e.stopPropagation();//FF 取消冒泡
				}else{
					e.cancelBubble=true;//IE  取消冒泡
				}
				alert("spanBox");
			}
		</script>
	</body>
</html>
